<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane v-for="v in areaArr" :key="v.name" :label="v.areaType" :name="v.name">
      <!-- 座位号 -->
      <div class="seatNumber">
        <!-- 控制行 -->
        <div class="row" v-for="v in seatArr" :key="v.title">
          <!-- 控制列 -->
          <div class="col">
            <span>{{v.title}}</span>
            <div class="box" :style="{backgroundColor: item.active==0 ? '#81D3F8' : '#AAAAAA'}" v-for="(item,index) in v.seatNumber" :key="index">
              <p>{{item.date}}</p>
              <p>{{item.active==0 ? '空闲' : '满员'}}</p>
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>

import { reactive,toRefs,computed } from 'vue'
export default {
  setup() {
    const data = reactive({
      activeName: 0,
      // 区域
      areaArr:[
        {areaType:'单人明区',name:'0'},
        {areaType:'单人暗区',name:'1'},
        {areaType:'双人区(靠窗)',name:'2'},
        {areaType:'双人区(室内)',name:'3'},
      ],
      seatArr: [
        {
          title:'1号桌',
          seatNumber:[
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:2},
            {date:'19:00-20:00',active:2},
            {date:'19:00-20:00',active:2},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
          ]
        },
        {
          title:'2号桌',
          seatNumber:[
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
          ]
        },
        {
          title:'3号桌',
          seatNumber:[
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
          ]
        },
        {
          title:'4号桌',
          seatNumber:[
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
          ]
        },
        {
          title:'5号桌',
          seatNumber:[
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
            {date:'19:00-20:00',active:0},
          ]
        },
      ],
      // 方法


    })


    return {...toRefs(data)}
  }
}
</script>

<style lang="scss" scoped>

* {
  padding: 0;
  margin: 0;
}

.seatNumber {
  display: flex;
  text-align: center;
  .row {
    display: flex;
    justify-content: center;
    width: 16%;
  .col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    .box {
      font-size: 12px;
      width: 80%;
      height: 40px;
      margin-top: 10px;
      border: 1px solid skyblue;
    }
  }
  }
}


</style>
